<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>每周三商机跟踪列表</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/fixedTable/fixed-table.css" />
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
</head>
<style>
    .fixed-table-box>.fixed-table_header-wraper {
        /* overflow:hidden;*/
        overflow-x:hidden;
    }
    .nofix{
        overflow-y: hidden !important;
    }
    .fixed-table-box{
        /*width: 800px;*/
        /*margin: 50px auto;*/
    }
    .fixed-table-box>.fixed-table_body-wraper{/*内容了表格主体内容有纵向滚动条*/
        max-height: 260px;
    }

    .fixed-table_fixed>.fixed-table_body-wraper{/*为了让两侧固定列能够同步表格主体内容滚动*/
        max-height: 240px;
    }

    .w-150{
        width: 80px;
        text-align: center;
    }
    .w-120{
        width: 187px;
    }
    .w-121{
        width: 113px;
    }
    .w-300{
        width: 300px;
    }
    .w-100{
        width: 100px;
    }
    .btns{
        text-align: center;
    }
    .btns button{
        padding: 10px 20px;
    }
    span.lineOne {
        line-height: 30px;
        height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }
    .div-td-content-more {
        position: absolute;
        height: auto;
        z-index: 999;
        line-height: 20px;
        background-color: #d3e8fd;
        padding: 8px 6px;
        border: 1px solid #e8e8ea;
        display: none;
    }
    .div-td-content-more i {
        width: 15px;
        height: 12px;
        background: url("/dist/img/more-icon.png");
        position: absolute;
        left: 50px;
        top: -12px;
    }
</style>
<body>
<section class="content" id="app">
    <div class="div-td-content-more"><i></i></div>
    <div class="fixed-table-box row-col-fixed">
        <!-- 表头 start -->
        <div class="fixed-table_header-wraper">
            <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
                <thead>
                <tr>
                    <th style="width: 104px;" data-fixed="true"><div class="table-cells">经销商</div></th>
                    <th style="width: 187px;"><div class="table-cells">城市/区域(客户户口所在地)</div></th>
                    <th style="width: 114px;"><div class="table-cells">用户项目所在地</div></th>
                    <th style="width: 113px;"><div class="table-cells">商机确认日期</div></th>
                    <th style="width: 70px;"><div class="table-cells">关单机率</div></th>
                    <th style="width: 70px;"><div class="table-cells">客户姓名</div></th>
                    <th style="width: 113px;"><div class="table-cells">是否迪尔老客户</div></th>
                    <th style="width: 113px;"><div class="table-cells">现有机型</div></th>
                    <th style="width: 160px;"><div class="table-cells">工况</div></th>
                    <th style="width: 70px;"><div class="table-cells">需求机型</div></th>
                    <th style="width: 70px;"><div class="table-cells">需求台量</div></th>
                    <th style="width: 113px;"><div class="table-cells">二手机置换型号</div></th>
                    <th style="width: 113px;"><div class="table-cells">目前竞争品牌</div></th>
                    <th style="width: 80px;"><div class="table-cells">购机方式</div></th>
                    <th style="width: 90px;"><div class="table-cells">商机目前状态</div></th>
                    <th style="width: 80px;"><div class="table-cells">经销商报价</div></th>
                    <th style="width: 145px;"><div class="table-cells">经销商提供的促销政策</div></th>
                    <th style="width: 270px;">
                        <div class="table-cells">预计交机日期/实际丢单日期/实际赢单日期</div>
                    </th>
                    <th style="width: 80px;"><div class="table-cells">销售员姓名</div></th>
                    <th style="width: 113px;"><div class="table-cells">丢单给哪个品牌</div></th>
                    <th style="width: 113px;"><div class="table-cells">丢单给哪个型号</div></th>
                    <th style="width: 155px;"><div class="table-cells">如丢单，是否丢给二手机</div></th>
                    <th style="width: 113px;"><div class="table-cells">丢单原因</div></th>
                    <th style="width: 113px;"><div class="table-cells">丢单原因详述</div></th>
                    <th style="width: 113px;"><div class="table-cells">赢单品牌最终卖价</div></th>
                    <th style="width: 113px;"><div class="table-cells">赢单品牌利率</div></th>
                    <th style="width: 113px;"><div class="table-cells">赢单品牌首付比例</div></th>
                    <th style="width: 113px;"><div class="table-cells">赢单品牌置换补贴</div></th>
                    <th style="width: 145px;"><div class="table-cells">赢单品牌配件赠送金额</div></th>
                    <th style="width: 113px;"><div class="table-cells">其他信息</div></th>
                    <th style="width: 113px;"><div class="table-cells">成交概率</div></th>
                    <!--<th style="width: 113px;"><div class="table-cells">信息填写完整度</div></th>-->
                </tr>
                </thead>
            </table>
        </div>
        <!--内容-->
        <div class="fixed-table_body-wraper">
            <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                <tr v-for="(item,i) in track.main">
                    <td style="width: 104px;"><div class="table-cell">{{item.companyName}}</div></td>
                    <td style="width: 187px;"><div class="table-cell">{{item.provinceName}}-{{item.cityName}}-{{item.countyName}}</div></td>
                    <td style="width: 114px;"><div class="table-cell">{{item.buildCityName}}</div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.confirmationDate}}</div></td>
                    <td style="width: 70px;"><div class="table-cell">{{item.closeorderProbability}}</div></td>
                    <td style="width: 70px;"><div class="table-cell">{{item.customerName}}</div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.yhdeOlder}}</div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.havingModel}}</div></td>
                    <td style="width: 160px;"><div class="table-cell"><span class="lineOne">{{item.buildCondition}}</span></div></td>
                    <td style="width: 70px;"><div class="table-cell">{{item.needModel}}</div></td>
                    <td style="width: 70px;"><div class="table-cell">{{item.needNumber}}</div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.replacementModel}}</div></td>
                    <td style="width: 113px;"><div class="table-cell"><span class="lineOne">{{item.competitorBrand}}</span></div></td>
                    <td style="width: 80px;"><div class="table-cell">{{item.buyType}}</div></td>
                    <td style="width: 90px;"><div class="table-cell">{{item.confirmationStatus}}</div></td>
                    <td style="width: 80px;"><div class="table-cell">{{item.dealerquote}}</div></td>
                    <td style="width: 145px;"><div class="table-cell">{{item.dealerpolicy}}</div></td>
                    <td style="width: 270px;"><div class="table-cell">{{item.actualDate}}</div></td>
                    <td style="width: 80px;"><div class="table-cell">{{item.regionalManagerName}}</div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.lostorderBrand}}</div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.lostorderModel}}</div></td>
                    <td style="width: 155px;"><div class="table-cell">{{item.lostorderFlag}}</div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.lostorderReason}}</div></td>
                    <td style="width: 113px;"><div class="table-cell"><span class="lineOne">{{item.lostorderReasonDetails}}</span></div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.salePrice}}</div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.interestRate}}</div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.downPayment}}</div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.replacementSubsidy}}</div></td>
                    <td style="width: 145px;"><div class="table-cell">{{item.accessbonus}}</div></td>
                    <td style="width: 113px;"><div class="table-cell"><span class="lineOne">{{item.otherInformation}}</span></div></td>
                    <td style="width: 113px;"><div class="table-cell">{{item.transactionProbability}}</div></td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--固定列-->
        <div class="fixed-table_fixed fixed-table_fixed-left">
            <div class="fixed-table_header-wraper nofix">
                <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0">
                    <thead>
                    <tr>
                        <th style="width: 104px;"><div class="table-cell">经销商</div></th>
                    </tr>
                    </thead>
                </table>
            </div>

            <div class="fixed-table_body-wraper">
                <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                    <tr v-for="(item,i) in track.main">
                        <td style="width: 104px;"><div class="table-cell">{{item.companyName}}</div></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/fixedTable/fixed-table.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            currentUser: getCurrentUser(),
            track:{
                main:{}
            },
            searchParams: {
                key: '',
                customerName: '',
                companyId: '',
                bigRegionalId: '',
                regionalManagerId: '',
                date: new Date().Format("yyyy-MM-dd"),
            },
        },
        methods: {
            getThurTrackList:function () {
                var that = this;
                $.wyui.postMethod(urlConfig.thursday.getThurTrackList,{
                        key: that.searchParams.key,
                        userId: that.currentUser.id,
                        companyId: that.searchParams.companyId,
                        bigRegionalId: that.searchParams.bigRegionalId,
                        regionalManagerId: that.searchParams.regionalManagerId,
                        dateTime: that.searchParams.date
                    },
                    function (data){
                        that.track.main= data.records;
                    });
            }
        },
        mounted: function () {
            var that = this;
            that.getThurTrackList();
        }
    });

</script>
<script>
    //初始化FixedTable
    $(".fixed-table-box").fixedTable();
</script>
</body>
</html>